<template>
    <div class="ranking-box">
        <img src="../../../../assets/images/refresh.png" class="refresh" @click="refreshFun">
        <table class="t_list" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <th colspan="4">最新注单</th>
            </tr>
            <tr class="t_list_caption">
                <th>号码</th>
                <th>赔率</th>
                <th>金额</th>
                <th>时间</th>
            </tr>
            <tr v-for="(item,index) in newbetsData" :key="index">
                <td class="t_td_caption_1">{{item.title}}</td>
                <td class="t_td_text">{{item.rate}}</td>
                <td class="t_td_text">{{item.value}}</td>
                <td class="t_td_text">{{item.datetime.substr(11,8)}}</td>
            </tr>
        </table>
    </div>
</template>
<style scoped>
    .ranking-box{
        margin-top: 10px;
        position: relative;
    }
    .refresh{
        position: absolute;
        right: 12px;
        top: 5px;
        z-index: 1;
        width: 17px;
        cursor: pointer;
    }
</style>

<script>

    var timer = null;
    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    export default {
        name: "NewBet",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            openBet: {  //可下注
                type: Boolean,
                required: true
            },
            ninetime: {  //90s
                type: Number,
                required: true
            },
            newbetData: {  //最新注单
                type: Array,
                required: true
            },
        },
        data(){
            return{
                newbetsData: [],  //最新注单data
            }
        },
        methods: {
            init(){
                // console.log(this.$route.query);
                var _this = this;

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    if (timer) {
                        clearInterval(timer);
                        timer = null;
                    }

                    _this.$httpGet('/api/wager/last/'+ _this.params.nowlottery).then(response => {
                        
                        if(response.status == 200){
                            _this.newbetsData = response.data;

                            timer = setInterval(() => {
                                _this.init();
                            }, 20 * 1000)
                        }

                    });

                }
                
            },
            inits(){
                // console.log(this.$route.query);
                var _this = this;

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    _this.$httpGet('/api/wager/last/'+ _this.params.nowlottery).then(response => {
                        
                        if(response.status == 200){
                            _this.newbetsData = response.data;
                        }

                    });
                    
                }
                
            },
            refreshFun(){
                this.inits();
            },
        },
        mounted(){
            this.init();
        },
        beforeDestroy(){
            clearInterval(timer);
        },
        watch: {
            openBet: function(now,old){
                // console.log(now,old);
                //开奖  刷新长龙数据
                this.inits();
                
            },
            ninetime: function(now,old){
                // console.log(now,old);
                //90s  刷新数据
                this.inits();
            },
            newbetData: {
                handler(newValue, oldValue) {
                    this.newbetsData = newValue;
        　　　　},
        　　　　deep: true
            }
            

        },
    }
</script>
